<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <script src="./map/js/china.js"></script>
    <style>
        .box{
            width:700px;
            height: 400px;
            border:1px solid #ccc;
            display: block;
        }
    </style>
</head>
<body>
    <div id="chartA" class="box"></div>
    <script>
        let chartA=echarts.init(document.querySelector("#chartA"));
        chartA.setOption({
            tooltip:{
                formatter:"{b}<br>数量:{c}"
            },

            //完成数据和视觉颜色、大小、位置、范围等相关的映射关系，常用于地图、svg图形等一些图形中，作用类似于直接坐标轴的x和y轴
            // visualMap:{
            //     type:"continuous",//连续数据映射
            //     min:0,
            //     max:10000,
            //     text:["最高","最低"],
            //     calculable:true,
            //     inRange:{
            //         color:['blue','yellow','red']
            //     }
            // },

            visualMap:{
                type:"piecewise",//分段数据映射
                min:0,
                max:10000,
                
                // text:["最高","最低"],//如果是分段数据映射，设置text，范围就不见了
         
                inRange:{
                    color:['blue','yellow','hotpink']
                }
            },
            series:[
                {
                    type:"map",
                    map:"china",//注册的地图名称
                    label:{//地图上显示的一些文本信息
                        show:true
                    },
                    data:[
                        {
                            name:"江苏",value:9000
                        },
                        {
                            name:"安徽",value:2000
                        },
                        {
                            name:"浙江",value:5000
                        }
                    ]
                }
            ]
        });
    </script>
</body>
</html>